<template>
  <div class="card content-box">
    <el-form ref="updateRequestFormRef" :model="updateRequestForm" :rules="rules" label-width="140px">
      <div v-auth="'operation_rule_requestOverdueTurnProblem'">
        <teble>
          <tr>
            <td>规则详细：</td>
            <td>请求比预定SLA逾期（超时未完成）</td>
            <td><el-input-number v-model="updateRequestForm.day" :min="0" :max="99999" /></td>
            <td>天，</td>
            <td><el-input-number v-model="updateRequestForm.hour" :min="0" :max="99999" /></td>
            <td>小时，</td>
            <td><el-input-number v-model="updateRequestForm.minute" :min="0" :max="99999" /></td>
            <td>分钟后升级为问题。</td>
          </tr>
          <tr>
            <td>启用：</td>
            <td><el-checkbox v-model="updateRequestForm.enable" size="large">显示边框</el-checkbox></td>
          </tr>
        </teble>
        <el-form-item>
          <el-button type="primary" @click="submitForm(updateRequestFormRef)"> 保存 </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="dynamicForm">
import { reactive, ref, onMounted } from "vue";
import { checkPhoneNumber, password } from "@/utils/eleValidate";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { findUserDetail, resetPassword, getCurrentLoginUser } from "@/api/modules/accessController";
import { findUpdateRequest, updateRequestToProblem } from "@/api/modules/businessRules";

const updateRequestFormRef = ref<FormInstance>();
const enableFlag = ref(false);
const updateRequestForm = reactive({
  day: 0,
  hour: 0,
  minute: 0,
  id: "",
  enable: false
});

const rules = reactive<FormRules>({});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateRequestToProblem(updateRequestForm, "updateRequestDTO").then(res => {
        console.log(res);
        ElMessage({
          type: "success",
          message: "保存成功"
        });
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
onMounted(() => {
  findUpdateRequest().then(res => {
    let newResRequest = JSON.parse(JSON.stringify(res));
    updateRequestForm.day = newResRequest.day;
    updateRequestForm.hour = newResRequest.hour;
    updateRequestForm.minute = newResRequest.minute;
    updateRequestForm.enable = newResRequest.enable;
    updateRequestForm.id = newResRequest.id;
  });
});
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
